/* Color
-------------------------- */
$color-white: #ffffff;
$color-white-light: rgba(255, 255, 255, 0.65);
$color-white-light2: rgba(255, 255, 255, 0.35);

$color-primary: #1089ff;
$color-primary-light1: mix(#ffffff, $color-primary, 20%);
$color-primary-light2: mix(#ffffff, $color-primary, 40%);
$color-primary-light3: mix(#ffffff, $color-primary, 60%);
$color-primary-light4: mix(#ffffff, $color-primary, 80%);
$color-primary-light5: mix(#ffffff, $color-primary, 90%);
$color-primary-light6: mix(#ffffff, $color-primary, 95%);
$color-primary-active: mix(#000000, $color-primary, 10%);

$color-success: #52c41a;
$color-success-light1: mix(#ffffff, $color-success, 20%);
$color-success-light2: mix(#ffffff, $color-success, 40%);
$color-success-light3: mix(#ffffff, $color-success, 60%);
$color-success-light4: mix(#ffffff, $color-success, 80%);
$color-success-light5: mix(#ffffff, $color-success, 90%);
$color-success-light6: mix(#ffffff, $color-success, 95%);
$color-success-active: mix(#000000, $color-success, 10%);

$color-info: #35495e;
$color-info-light1: mix(#ffffff, $color-info, 20%);
$color-info-light2: mix(#ffffff, $color-info, 40%);
$color-info-light3: mix(#ffffff, $color-info, 60%);
$color-info-light4: mix(#ffffff, $color-info, 80%);
$color-info-light5: mix(#ffffff, $color-info, 90%);
$color-info-light6: mix(#ffffff, $color-info, 95%);
$color-info-active: mix(#000000, $color-info, 10%);

$color-warning: #fa8c16;
$color-warning-light1: mix(#ffffff, $color-warning, 20%);
$color-warning-light2: mix(#ffffff, $color-warning, 40%);
$color-warning-light3: mix(#ffffff, $color-warning, 60%);
$color-warning-light4: mix(#ffffff, $color-warning, 80%);
$color-warning-light5: mix(#ffffff, $color-warning, 90%);
$color-warning-light6: mix(#ffffff, $color-warning, 95%);
$color-warning-active: mix(#000000, $color-warning, 10%);

$color-danger: #f5222d;
$color-danger-light1: mix(#ffffff, $color-danger, 20%);
$color-danger-light2: mix(#ffffff, $color-danger, 40%);
$color-danger-light3: mix(#ffffff, $color-danger, 60%);
$color-danger-light4: mix(#ffffff, $color-danger, 80%);
$color-danger-light5: mix(#ffffff, $color-danger, 90%);
$color-danger-light6: mix(#ffffff, $color-danger, 95%);
$color-danger-active: mix(#000000, $color-danger, 10%);

$dark-bg: #001529;

/* text-color
-------------------------- */
$color-text-primary: #17233d;
$color-text-default: #515a6e;
$color-text-secondary: #808695;
$color-text-disabled: #c5c8ce;
$color-text-placeholder: #c0c4cc;

/* bg-color
-------------------------- */
$color-bg-fa: #fafafa;
$color-select-hover: #f5f5f5;
$color-effect-shadow: $color-primary;
$color-input-shadow: $color-primary;
$color-input-error-shadow: $color-danger;

/* border
-------------------------- */
$border-color-base: #dcdfe6;
$border-color-light: #f0f0f0;
$border-base: 1px solid $border-color-base;
$border-base-light: 1px solid $border-color-light;
$border-table: 1px solid #e8eaec;
$border-table-color: #e8eaec;
$border-popper-color: #ebeef5;

/* radius font-size
-------------------------- */
$border-base-radius: 2px;
$base-font-size: 14px;
$header-font-size: 16px;

/* height
-------------------------- */
$large-height: 36px;
$default-height: 32px;
$small-height: 28px;
$mini-height: 24px;
$base-line-height: 1.5715;

$animation-duration-slow: 0.3s;
$animation-duration-base: 0.2s;
$animation-duration-fast: 0.1s;

// 阴影
//阴影向下：主要应用于组件内部或组件本身，是比较常规场景的用法
//阴影向上：主要应用于底部导航或工具栏等
//阴影向左：主要应用于右边导航栏、抽屉组件或固定表格栏
//阴影向右：主要应用于左边导航栏、抽屉组件或固定表格栏
//第 1 层: 物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中，如：卡片 hover 等；
$shadow-1-up: 0 -1px 2px -2px rgba(0, 0, 0, 0.16), 0 -3px 6px 0px rgba(0, 0, 0, 0.12),
  0 -5px 12px 4px rgba(0, 0, 0, 0.09);
$shadow-1-down: 0px 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0px rgba(0, 0, 0, 0.12),
  0 5px 12px 4px rgba(0, 0, 0, 0.09);
$shadow-1-left: -1px 0 2px -2px rgba(0, 0, 0, 0.16), -3px 0px 6px 0px rgba(0, 0, 0, 0.12),
  5px 0px 12px 4px rgba(0, 0, 0, 0.09);
$shadow-1-right: 1px 0 2px -2px rgba(0, 0, 0, 0.16), 3px 0px 6px 0px rgba(0, 0, 0, 0.12), 5px,
  0px 12px 4px rgba(0, 0, 0, 0.09);

// 第二层 物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动，如：下拉面板等；
$shadow-2-up: 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -6px 16px 0px rgba(0, 0, 0, 0.08),
  0 -9px 28px 8px rgba(0, 0, 0, 0.05);
$shadow-2-down: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0px rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
$shadow-2-left: -3px 0 6px -4px rgba(0, 0, 0, 0.12), -6px 0px 16px 0px rgba(0, 0, 0, 0.08),
  -9px 0px 28px 8px rgba(0, 0, 0, 0.05);
$shadow-2-right: 3px 0 6px -4px rgba(0, 0, 0, 0.12), 6px 0px 16px 0px rgba(0, 0, 0, 0.08), 9px,
  0px 28px 8px rgba(0, 0, 0, 0.05);

//第 3 层：物体位于高层级，该物体的运动和其他层级没有关联，如：对话框等。
$shadow-3-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0px rgba(0, 0, 0, 0.05),
  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
$shadow-3-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0px rgba(0, 0, 0, 0.05),
  0 12px 48px 16px rgba(0, 0, 0, 0.03);
$shadow-3-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0px rgba(0, 0, 0, 0.05),
  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
$shadow-3-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0px rgba(0, 0, 0, 0.05),
  12px 0 48px 16px rgba(0, 0, 0, 0.03);

$shadow-popper: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
